
<template>
    <div class="container">
        <Navbars></Navbars>
        <el-row  :gutter="20">
            <el-col :span="18">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="(item,index) in dataForm.workList" :key="index" class="mb15" >
                        <el-card  class="youxian" style="padding:0 20px">
                            <div slot="header" class="disflex spacebetween flex-end"> 
                                <div class="carheader">
                                    {{item.action}}
                                </div>
                               <i class="el-icon-more gengduo" ></i>
                            </div>
                            <div style="width:100%" @click="handletoInfo(item)">
                                <div class="disflex" style="margin-top:10px">
                                    <div>编号数量：</div>
                                    <div>{{item.num}}</div>
                                </div>
                                <div class="disflex" style="margin-top:10px">
                                    <div>更新时间：</div>
                                    <div>{{item.updateTime}}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-card class="filecard">
                        <div slot="header" class="disflex spacebetween flex-end"> 
                            <el-form label-width="80px" :inline="true" class="wendang">
                                <el-form-item label="说明文档">
                                    <el-input v-model="form.name" size="small" style="width:500px"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-upload
                                        action="#"
                                        :show-file-list="false"
                                        :http-request="fnUploadRequest">
                                        <el-button size="small" type="primary" class="btncolor btn">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="">
                                    <el-button @click="handleAddfile" size="small" :disabled="disabled" type="primary" class="btncolor btn">新增</el-button>
                                </el-form-item>
                            </el-form>
                            <div class="disflex gengduo">
                                更多文档<i class="el-icon-arrow-right" ></i>
                            </div>
                        </div>
                        <el-table :data="fileList" :header-cell-style="{background:'#f6f9fe',color:'#7690db'}">
                            <el-table-column align="center" prop="filename"  label="文件名称" ></el-table-column>
                            <el-table-column align="center" prop="type"  label="类型" ></el-table-column>
                            <el-table-column align="center" prop="createTime"  label="上传时间" ></el-table-column>
                            <el-table-column align="center" fixed="right"  label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text"  class="edit" @click="handldow(scope.row)">下载文件</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="text" class="edit" @click="filedel(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-row>
            </el-col>
            <el-col :span="6" >
                <el-card class="youxian" style="padding:0 20px">
                    <div slot="header" class="disflex spacebetween flex-end"> 
                        <div class="carheader">
                            最新动态
                        </div>
                        <div class="disflex gengduo">
                            更多记录<i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="stepsview">
                        <el-steps direction="vertical" :active="1" :space="100">
                            <el-step v-for="(item,index) in brandlog" :key="index">
                                <template slot="icon">
                                    <div class="acticon"></div>
                                </template>
                                <template slot="title">
                                   {{item.createTime}} {{item.name}}
                                </template>
                                <template slot="description">
                                    <div class="actview">{{item.content}}</div>
                                </template>
                            </el-step>
                        </el-steps>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
import { upload } from '@/api/home.js'
import {branchdetail,branchlog,branchfile,branchfileadd,brandfiledel} from '@/api/version.js'
export default {
    data() {
        return {
            form:{},
            fileList:[],
            id:this.$route.query.id,
            dataForm:{},
            brandlog:[],
            filename:'',
            originalName:'',
            type:'',
            size:'',
            disabled:true
        }
    },
    created(){
        this.getbarncInfo()
        
    },
    methods: {
        getbranlog(projectId){
            let data = {
                projectId: projectId,
                branchId:this.id,
                page:1,
                num:7,
                type:''
            }
            this.$getFlag().then(obj=>{
                branchlog(data,obj.data).then(res=>{
                    if(res.status==200){
                        this.brandlog = res.list
                    }
                })
            })
        },
        // 分支项目详情
        getbarncInfo(){
            this.$getFlag().then(obj=>{
                branchdetail({id:this.id},obj.data).then(res=>{
                    if(res.status==200){
                        this.dataForm = res.data
                        this.getbranlog(this.dataForm.projectId)
                        this.getbrandfile(this.dataForm.projectId)
                    }
                })
            })
        },
        // 上传
        fnUploadRequest(item){
            console.log(item)
            this.size = item.file.size
            this.form.name = item.file.name
            const formData = new FormData()
            formData.append('file', item.file)
            this.$getFlag().then(obj=>{
                upload(formData,obj.data).then(res=>{
                    console.log(res)
                    if(res.status==200){
                        this.disabled = false
                        this.filename = res.data.filename
                        this.originalName = res.data.originalName
                        this.type = res.data.type
                    }
                })
            })
        },
        handldow(){

        },
        handldel(){

        },
        handletoInfo(item){
            this.$router.push({
                path: '/manageriteminfo',
                query:{branchId:this.dataForm.id,projectId:this.dataForm.projectId,action:item.action}
            })
        },
        // 分支文档列表
        getbrandfile(projectId){
            let data={
                page:1,
                num:10,
                branchId:this.id,
                projectId:projectId
            }
            this.$getFlag().then(obj=>{
                branchfile(data,obj.data).then(res=>{
                    if(res.status==200){
                        this.fileList  = res.list
                    }
                })
            })
        },
        handleAddfile(){
            let data = {
                branchId:this.id,
                projectId:this.dataForm.projectId,
                filename:this.filename,
                originalName:this.originalName,
                type:this.type,
                size:this.size
            }
            this.$getFlag().then(obj=>{
                branchfileadd(data,obj.data).then(res=>{
                    if(res.status==200){
                        if (res.status == 200) {
                            this.$notify({title: "操作成功", message: res.msg,  type: "success",  duration: 2000,});
                            this.getbrandfile();
                        } else {
                            this.$notify({  title: "操作失败",  message: res.msg,  type: "error",  duration: 2000,});
                        }
                    }
                })
            })
        },
        
        filedel(item){
            let data = {
                id:item.id,
                branchId:this.$route.query.id,
                projectId:this.dataForm.projectId
            }
            this.$confirm("确定要删除角色吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$getFlag().then(obj=>{
                    brandfiledel(data,obj.data).then((response) => {
                        if (response.status == 200) {
                            this.$notify({
                                title: "操作成功",
                                message: response.msg,
                                type: "success",
                                duration: 2000,
                            });
                            this.getbrandfile();
                            } else {
                            this.$notify({
                                title: "操作失败",
                                message: response.msg,
                                type: "error",
                                duration: 2000,
                            });
                            }
                        });
                    }) 
                }).catch(() => {
                //
            });
        }
        
    }
}
</script>
<style lang="scss" scoped>
::v-deep .wendang .el-form-item {
    margin-bottom: 0;
}
::v-deep .wendang .el-form-item__label{
    font-weight: 700;
    color:#000;
}
::v-deep .filecard .el-card__body{
    padding-top: 0;
}
::v-deep .youxian .el-card__header{
    padding: 0 ;
}
::v-deep .youxian .el-card__body{
    padding-left:0 ;
    padding-right:0 ;
}
.carheader{
    height: 56px;
    line-height: 56px;
    border-bottom:2px solid #6896ee;
    font-weight: 600;
}
.gengduo{
    color: #999;
    font-size: 14px;
    margin-bottom: 10px;
}
.acticon{
    width: 5px;
    height: 5px;
    background-color: #6896ee;
    border-radius: 50%;
}
.actview{
    width: 100%;
    background-color: #edf1fc;
    border-radius: 3px;
    padding:15px 20px
}
.stepsview{
    height:700px;
}
::v-deep .stepsview .el-step__description{
    padding-right: 0;
}
::v-deep .stepsview .el-step.is-vertical .el-step__head{
    width: 24px;
}
::v-deep .stepsview .is-finish .el-step__icon{
    width: 14px;
    height: 14px;
    background-color: #6896ee;
    border-color: #6896ee;
}
::v-deep .stepsview .is-vertical .el-step__icon{
    width: 14px;
    height: 14px;
    background-color:#d0defc;
    border-color: #d0defc;
}

::v-deep .stepsview .is-wait .el-step__icon{
    width: 14px;
    height: 14px;
    background-color:#d0defc;
    border-color: #d0defc;
}
::v-deep .stepsview .el-step.is-vertical .el-step__line{
    width: 1px;
}
::v-deep .stepsview .el-step.is-vertical .el-step__line{
    left: 6px;
    top:6px
}
</style>